<template>
  <scroll-view
    class="myView"
    :scroll-y="true"
    :lower-threshold="100"
    :enable-back-to-top="true"
    :enable-flex="true"
    @scrolltolower="onScrolltolower"
  >
    <BackgroundBar title="海岛" :showShare="true"></BackgroundBar>
    <view class="scrollView">
      <view class="myCard" :style="{ backgroundImage: `url(${myCardBg})` }">
        <view class="accountDataArap">
          <AccountData />
        </view>
        <view class="fansNumberWrap">
          <FansNumber :hasCollect="true" />
        </view>
      </view>
      <PostList />
      <uv-gap height="50rpx"></uv-gap>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { changeTabbar } from "/utils/tabBar.js";
import BackgroundBar from "/components/NavigationBar/background.vue";

import PostList from "/components/PostList/index.vue";
import AccountData from "/components/AccountData/index.vue";
import FansNumber from "/components/AccountData/fansNumber.vue";

const { proxy } = getCurrentInstance();

changeTabbar(2);

const myCardBg = ref("");
(async () => {
  myCardBg.value = await proxy.getFileIdToUrl("projectImg/myBg.png");
})();

// const onScrolltolower = () => {}
</script>

<style lang="scss">
page {
  height: 100vh;
  padding-bottom: calc(96rpx + env(safe-area-inset-bottom));
}

.myView {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.scrollView {
  flex: 1;
}

.myCard {
  width: 690rpx;
  height: 320rpx;
  margin: 30rpx auto;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 60rpx;
}

.accountDataArap {
  padding: 40rpx 25rpx;
}

.fansNumberWrap {
}
</style>
